<template>
    <div class="login">
        <div class="login_box">
            <h2>扫码点餐客户端</h2>
            <el-form :model="loginForm" status-icon :rules="loginRules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="loginForm.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <div class="register">
                    注册
                </div>
                <el-form-item>
                    <el-button type="success" @click="loginBtn">登录</el-button>
                </el-form-item>
            </el-form>


        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    name: 'MyAppLogin',

    data() {
        return {
            loginForm: {
                account: "17600000000",//账号手机号
                password: "s123456",//密码
            },
            loginRules: {
                account: [],
                password: [],
            }
        };
    },

    mounted() {

    },

    methods: {
        ...mapActions('login', ['loginActions']),
        async loginBtn() {
            try {
                await this.loginActions(this.loginForm)
                this.$message.success('登录成功')
                this.$router.push('/home')
            } catch (error) {
                this.$message.error('登录失败')
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.el-form {
    margin-right: 50px;
}

.register {
    width: 100%;
    margin-left: 360px;
    margin-bottom: 10px;
}

.el-button {
    width: 100%;

}

.login {
    width: 100vw;
    height: 100vh;
    background: skyblue;

    .login_box {
        width: 450px;
        height: 300px;
        background: white;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

        h2 {
            width: 100%;
            text-align: center;
            line-height: 80px;
        }
    }
}
</style>